<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>focus 焦点图</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/common.js" ></script>
<style>
	.focus-wrap{width:720px;height: 404px;overflow: hidden;position: relative;}
	.focus-wrap ul{width:100%; height: 100%; position:absolute; top:0; left: 0; overflow: hidden;}
	.focus-wrap ul li{width:720px; height: 404px; float: left; display: inline;}
	.prenbtn{width:50px; height: 45px; display: block; position: absolute; top:175px; cursor: pointer; left:0; background: url(images/focus/prev.png) no-repeat; z-index: 9999;}
	.nextbtn{width:50px; height: 45px; display: block; position: absolute; top:175px; cursor: pointer; right:0; background: url(images/focus/next.png) no-repeat; z-index: 9999;}
	.focus-point{width:100%; position: absolute; height: 16px; bottom:16px; text-align: center; z-index: 9999;}
	.focus-point i{width:16px; height: 16px; background: #fff; display: inline-block; margin-right: 8px; text-indent: -999px; border-radius: 50%; cursor: pointer; opacity: .3;}
	.focus-point i.curr{background: #119DE8; opacity: 1;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">focus 焦点图</h2>
	<div class="wrap-main">
		<div class="focus-wrap" id="focus">
			<ul>
				<li><a href="#"><img src="images/focus/b1.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b2.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b3.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b4.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b5.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b6.jpg"></a></li>
			</ul>
			<span class="prenbtn"></span>
			<span class="nextbtn"></span>
		</div>
	</div>
</div>
<script>
	window.onload = function ()
	{
		
		var key = 0;													// 控制播放的张数
        var circle = 0;													// 控制小圆点
		var oDiv = document.getElementById("focus");					//获取大盒子
		var oPreBtn = miaov.common.getByClass("focus","prenbtn")[0];	//上一个按钮
		var oNextBtn = miaov.common.getByClass("focus","nextbtn")[0];	//下一个按钮
		var oUl = oDiv.getElementsByTagName("ul")[0];					//获取ul
		var oLi = oUl.getElementsByTagName("li");						//获取一个li
		var oLiWidth = oUl.getElementsByTagName("li")[0].offsetWidth;	//获取一个滚动的宽度
		var timer = null;												//定时器
		
		//焦点 demo添加
		var oPoint = document.createElement("div");
		oPoint.className = "focus-point";
		var oIdemo = '';
		for(var i=0; i< oLi.length; i++)
		{
			/*给圆点添加索引值和html文本*/
			oIdemo += '<i data-index="' + i +'">' + (i+1) + '</i>';
		}
		oDiv.appendChild(oPoint);
		oPoint.innerHTML = oIdemo;
		oPoint.getElementsByTagName("i")[0].className = "curr";
		
		var oPointDiv = miaov.common.getByClass("focus","focus-point");
		var oPoint = oPointDiv[0].getElementsByTagName("i");
		
		
		oUl.style.width = oLiWidth * oLi.length + 'px';
		//oUl.innerHTML += oUl.innerHTML;
		//oUl.appendChild(oLi[0]);
		
		for( var i=0; i<oLi.length; i++ )
		{
			oPoint[i].onclick = function()
			{
				var oThisLi =  this.getAttribute("data-index");
				for (var j = 0 ; j < oPoint.length;j++) {
	                oPoint[j].className = ""; 
	            }
	            oPoint[oThisLi].className = "curr";
				animate(oUl,-(oThisLi*oLiWidth));
				key = oThisLi;
				circle = oThisLi;
			}
		}
		
		//鼠标经过图片，图片停止自动播放
		oPointDiv[0].onmouseover = oUl.onmouseover = function ()
		{
			clearInterval(timer);				
		}
		
		//鼠标移开图片，打开定时器
		oPointDiv[0].onmouseout = oUl.onmouseout = function ()
		{
			timer = setInterval(autoplay,2000); // 自动轮播
		}
		
        timer = setInterval(autoplay,2000);// 自动轮播
        
        /*自动播放*/
        function autoplay(){
            /*li 索引值*/
            key++;
            if(key > oLi.length-1){
                oUl.style.left = 0; // 迅速调回
                key = 0; 
            }
            
            /*给li添加当前curr*/
            for (var i = 0 ; i < oLi.length;i++) {
                oLi[i].className = ""; 
            }
            oLi[key].className = "curr";
            
            
            // key从1开始，-(1*720px),-(2*720px),-(3*720px)... -(6*720px);
            animate(oUl,-key*oLiWidth);
            
            /*圆点 索引值*/
            circle++;
            if (circle > oLi.length-1) {
                circle = 0;
            }
            
            /*给圆点添加当前curr*/
            for (var i = 0 ; i < oPoint.length;i++) {
                oPoint[i].className = ""; 
            }
            oPoint[circle].className = "curr";

        }
		
		// 动画函数,obj = ul; target = 向左移动单位-(1*720px)；
        function animate(obj,target){
            // 首先清除掉定时器
            clearInterval(obj.timer);
            // 用来判断 是+ 还是 -  即说明向左走还是向右走
            var speed = obj.offsetLeft < target ? 15 : -15;
            obj.timer = setInterval(function(){
                var result = target - obj.offsetLeft;//它们的差值不会超过speed
                obj.style.left = obj.offsetLeft + speed + "px";
                // 有可能有小数的存在，所以在这里要做个判断             
                if (Math.abs(result) <= Math.abs(speed)) {
                    clearInterval(obj.timer);
                    obj.style.left = target + "px";
                }
            },10);
        }
		
	}
</script>
</body>
</html>
